import React, { useState, useEffect } from "react";
// import store from "../redux/store";
import { connect } from "react-redux";
import getCinemaListAction from "../redux/actionCreator/getCinemaListAction";
// export default class cinemas extends Component {
//   render() {
//     return <div>cinemas</div>;
//   }
// }
function Cinemas(props) {
  let { list, getCinemaListAction, cityName } = props;
  // const [cityName] = useState(store.getState().CityReducer.cityName);
  // const [cinemaList, setCinemaList] = useState(
  //   store.getState().CinemasListReducer.list
  // ); 用react-redux可以不用状态了
  useEffect(() => {
    // console.log(store.getState().CinemasListReducer.list);
    // 要进行使用缓存 如果list为空去后台取数据如果不为空 就使用缓存
    if (list.length === 0) {
      //用了redux尽量不在hooks其中进行数据交互 尽量在redux里进行管理
      //actionCreator里面写异步
      // debugger;
      //写了中间件就可以 store.dispatch函数
      // store.dispatch(getCinemaListAction());
      getCinemaListAction();
    } else {
      console.log("使用store缓存");
    }
    //订阅
    // let unsubscribe = store.subscribe(() => {
    //   console.log("订阅时间", store.getState().CinemasListReducer.list);
    //   setCinemaList(store.getState().CinemasListReducer.list);
    //   //重复切换城市和电影会导致重复订阅
    // });
    // return () => {
    //   //取消订阅？
    //   unsubscribe();
    // };
  }, [list, getCinemaListAction]);

  return (
    <div>
      <div style={{ overflow: "hidden" }}>
        <div style={{ float: "left", margin: "10px 0 0 10px" }}>
          {" "}
          <h2
            onClick={() => {
              props.history.push(`/city`);
            }}
          >
            {cityName}
          </h2>
        </div>
        <div
          onClick={() => {
            props.history.push(`/cinemas/search`);
          }}
          style={{ float: "right", margin: "10px 10px 0 0" }}
        >
          搜索
        </div>
      </div>
      {list.map((item) => (
        <dl key={item.cinemaId} style={{ padding: "10px" }}>
          <dt style={{ fontSize: "18px", color: "black", fontWeight: "700" }}>
            {item.name}
          </dt>
          <dd style={{ fontSize: "12px", color: "gray" }}>{item.address}</dd>
        </dl>
      ))}
    </div>
  );
}
const mapStateToProps = (state) => {
  return {
    list: state.CinemasListReducer.list,
    cityName: state.CityReducer.cityName,
  };
};
const mapDispatchToProps = {
  getCinemaListAction,
};
export default connect(mapStateToProps, mapDispatchToProps)(Cinemas);
